.date-range-picker {
  position: relative;
  font-size: $default-font-size;

  & .date-range-picker__controller {
    position: relative;

    & > input {
      box-sizing: border-box;
      border: $input-normal-border-width solid $input-normal-border-color;
      display: inline-block;
      width: 100%;
      height: $input-normal-height;
      line-height: $input-normal-height;
      color: $text-color;
      font-size: $font-size;
      padding-left: $input-padding-x;
      padding-right: $input-padding-x;
      outline: none;
      cursor: pointer;

      &:hover {
        border-color: #a8a8a8;
      }
    }

    & > .icon {
      position: absolute;
      right: 10px;
      line-height: $input-normal-height;
      top: 50%;
      margin-top: -$input-normal-height / 2;
      color: $datepicker-date-icon-color;
    }
  }

  // xSmall属性样式
  &.date-range-picker-xs {
    .date-range-picker__controller {
      & > input {
        height: $input-xs-height;
        line-height: $input-xs-height;
      }
      & > .icon {
        height: $input-xs-height;
        line-height: $input-xs-height;
        margin-top: -$input-xs-height/2;
      }
    }
  }
  // small属性样式
  &.date-range-picker-sm {
    .date-range-picker__controller {
      & > input {
        height: $input-sm-height;
        line-height: $input-sm-height;
      }
      & > .icon {
        height: $input-sm-height;
        line-height: $input-sm-height;
        margin-top: -$input-sm-height/2;
      }
    }
  }
  // large属性样式
  &.date-range-picker-lg {
    .date-range-picker__controller {
      & > input {
        height: $input-lg-height;
        line-height: $input-lg-height;
      }
      & > .icon {
        height: $input-lg-height;
        line-height: $input-lg-height;
        margin-top: -$input-lg-height/2;
      }
    }
  }
  //xLarge属性样式
  &.date-range-picker-xl {
    .date-range-picker__controller {
      & > input {
        height: $input-xl-height;
        line-height: $input-xl-height;
      }
      & > .icon {
        height: $input-xl-height;
        line-height: $input-xl-height;
        margin-top: -$input-xl-height/2;
      }
    }
  }

  & .date-range-picker__container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 210px;
    margin-top: 5px;
    background: $background-white-color;
    z-index: 99;

    &.date-range-picker__week-container {
      width: 460px;

      & .date-range-picker__header {
        border-bottom: 1px solid $content-border-color;

        & div {
          border: 0;
        }
      }
    }

    & .date-range-picker__panel-container > div {
      border: 1px solid $border-color;
    }

    & .date-range-picker__header {
      padding: 0 8px;
      line-height: $lg-input-height;
      text-align: center;

      & div {
        border-bottom: 1px solid $content-border-color;
      }

      & .date-range-picker__header__week-title {
        margin-left: 58px;
      }

      & .date-range-picker__header__prev-year-btn,
        .date-range-picker__header__next-year-btn {
        cursor: pointer;
        color: $icon-gray-color;

        &:hover {
          color: $primary-color;
        }

        &.icon--disabled{
          cursor: not-allowed;
        }
      }

      & .date-range-picker__header__year-btn {
        display: inline;
        width: 50px;
        height: 20px;
        margin: 8px;
        line-height: 18px;
        font-size: $text-font-size;
        color: $text-color;
        border: 1px solid $border-color;
        cursor: pointer;

        &:hover {
          color: $background-white-color;
          background: $primary-color;
        }
      }
    }

    & .date-range-picker__panel {
      & ul{
        padding: 5px 0;

        &.date-range-picker__week-panel {
          padding: 0 8px;

          & li {
            display: inline-block;
            vertical-align: top;
            width: 63px;
            height: 50px;
            padding: 5px;
            border-bottom: 1px solid $border-color;

            &:hover {
              color: $primary-color;
              background-color: $background-white-color;
            }

            &:nth-of-type(50),
            &:nth-of-type(51),
            &:nth-of-type(52),
            &:nth-of-type(53) {
              border: 0;
            }

            &:hover,
            &.date-range-picker__panel-item--active {
              background: $background-white-color;

              & div {
                background-color: $primary-color;
                color: #fff;
                border-radius: $button-radius;
              }
            }

            & div {
              height: 100%;

              & span {
                display: block;
                line-height: 20px;
                font-size: $text-font-size;
                text-align: center;

                &:first-child {
                  font-weight: bold;
                  font-size: $title-sm-font-size;
                }
              }
            }
          }
        }
      }

      & .date-range-picker__panel-item {
        padding: 0 8px;
        line-height: $xs-input-height;
        text-align: left;
        cursor: pointer;

        &:hover,
        &.date-range-picker__panel-item--active {
          color: $primary-color;
          background: $background-color;
        }
      }
    }
  }
}
